<template>
  <div>
    <!-- 双向绑定和修饰符 -->
    <!-- 普通表单 .trim修饰符，去掉首位的空格    number修饰符，输入的数据转换为数字类型 -->
    <input type="text" v-model.trim="text" />
    <p>{{ text }}</p>
    <!-- 下拉菜单 -->
    <select v-model="sel">
      <option value="yi">数据一</option>
      <option value="er">数据二</option>
      <option value="san">数据三</option>
    </select>
    <!-- 单选框 -->
    <input type="radio" name="sex" value="男" v-model="rad" /> 男
    <input type="radio" name="sex" value="女" v-model="rad" /> 女

    <!-- 复选框 -->
    <input type="checkbox" name="good" value="吃饭" v-model="good" /> 吃饭
    <input type="checkbox" name="good" value="睡觉" v-model="good" /> 睡觉
    <input type="checkbox" name="good" value="玩" v-model="good" /> 玩
    <p>{{ sel }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      text: "",
      sel: "",
      rad: "",
      good: ["吃饭", "睡觉", "玩"],
    };
  },
};
</script>

<style>
</style>